<template>
  <div class="header-bar">
    <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
    <div class="custom-content-con">
      <slot></slot>
    </div>
    <div class="boshimao pull-right mr-20">
      <img src="@/assets/images/boshimao.png" alt="" @click="previewWord">
    </div>
    <div v-if="hasAxs" class="anxinshui pull-right mr-20">
      <img src="@/assets/images/anxinshui.png" alt="" @click="anxinshuiLogin">
    </div>
    <!-- <div class="pull-right mr-20 lzw-message" @click="msgFn">
      <Badge :count="msgCount">
        <Icon type="md-notifications-outline" size="32" style="margin-top:11px"/>
      </Badge>
    </div> -->
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import siderTrigger from './sider-trigger'
import customBreadCrumb from './custom-bread-crumb'
import './header-bar.less'
export default {
  name: 'HeaderBar',
  components: {
    siderTrigger,
    customBreadCrumb
  },
  props: {
    collapsed: Boolean,
    loading: Boolean,
    hasAxs: Boolean,
    msgCount: Number
  },
  computed: {
    breadCrumbList () {
      return this.$store.state.app.breadCrumbList
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleCollpasedChange (state) {
      this.$emit('on-coll-change', state)
    },

    anxinshuiLogin () {
      this.$emit('ax-login')
    },
    msgFn () {
      console.log(222222222)
      this.$emit('open-drawer')
    },
    previewWord () {
      // console.log('点击了预览word文档')
      // var routeUrl = 'https://www.vxhro.com/Content/PDF/HRO客户端-线上使用指南.docx'; //要预览文件的访问地址
      // window.open('http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=' + encodeURIComponent(routeUrl));

      window.open('https://www.vxhro.com/Content/PDF/VXHRO云操作手册.pdf', '_blank')
    }
  },

  mounted () {
  }
}
</script>
<style lang="less" scoped>
  .admin-title{
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
    height: 100%;
    font-size: 18px;
    color: @main_color;
  }
  .anxinshui{
    height: 100%;
    img{
      margin-top: 10px;
      width: 84px;
      height: 32px;
      cursor: pointer;
    }
  }
  .boshimao{
    height: 100%;
    img{
      margin-top: 18px;
      width: 23px;
      height: 19px;
      cursor: pointer;
    }
  }
  .lzw-message{
    cursor: pointer;
    /deep/ .ivu-badge-count{
      top: 8px;
      right: 5px;
      height: 15px;
      line-height: 12px;
      padding: 0px 3px;
      min-width: 15px;
    }
  }
</style>
